<template>
  <div>
    <Nav />
    <div id="userInfo" class="userInfo-content">
      <div class="infohead">
        <div id="titlepage">
          <img src="../assets/images/login_bg2.jpg" id="tp_image" alt />
          <input type="text" value="1" name="uId" id="uId" />
          <input
            type="file"
            name="sendImgsss"
            id="sendImgsss"
            multiple
            onchange="showFileInfo2(this)"
          />

          <div class="tp_changebtn" onclick="changeTp()">
            <svg
              t="1597738484243"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4307"
              width="16"
              height="16"
            >
              <path
                d="M269.44 256l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333z m23.605333 64H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v426.666667a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V373.333333a53.333333 53.333333 0 0 0-53.333334-53.333333h-90.378666a32 32 0 0 1-30.570667-22.549333l-30.272-97.930667a10.666667 10.666667 0 0 0-10.186667-7.52H364.074667a10.666667 10.666667 0 0 0-10.186667 7.52l-30.272 97.92A32 32 0 0 1 293.045333 320zM512 725.333333c-88.362667 0-160-71.637333-160-160 0-88.362667 71.637333-160 160-160 88.362667 0 160 71.637333 160 160 0 88.362667-71.637333 160-160 160z m0-64a96 96 0 1 0 0-192 96 96 0 0 0 0 192z"
                p-id="4308"
                fill="#eeeeee"
              />
            </svg>
            编辑封面图片
          </div>
        </div>
        <div id="icon" @click="changePicture">
          <form
            action="http://localhost:3000/bookShop/upload"
            id="personImg"
            ref="sendImg"
            method="POST"
            enctype="multipart/form-data"
          >
            <img :src="`http://localhost:3000/upload/${this.contentas.headImg}`" ref="imagess" id="icon_image" alt />
            <input
              type="file"
              name="personalPicture"
              id="personPicture" ref="changes"
              multiple
              @change="showFileInfo()"
            />
            <input type="text" name="author" id="uId" value="0" v-model="uId" />
            <div id="icon_change">
              <svg
                t="1597738484243"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4307"
                width="100"
                height="100"
              >
                <path
                  d="M269.44 256l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333z m23.605333 64H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v426.666667a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V373.333333a53.333333 53.333333 0 0 0-53.333334-53.333333h-90.378666a32 32 0 0 1-30.570667-22.549333l-30.272-97.930667a10.666667 10.666667 0 0 0-10.186667-7.52H364.074667a10.666667 10.666667 0 0 0-10.186667 7.52l-30.272 97.92A32 32 0 0 1 293.045333 320zM512 725.333333c-88.362667 0-160-71.637333-160-160 0-88.362667 71.637333-160 160-160 88.362667 0 160 71.637333 160 160 0 88.362667-71.637333 160-160 160z m0-64a96 96 0 1 0 0-192 96 96 0 0 0 0 192z"
                  p-id="4308"
                  fill="#eeeeee"
                />
              </svg>
            </div>
          </form>
        </div>

        <div id="information">
          <router-link to="/User">
            <a>
              <span class="sp">
                返回我的主页
                <svg
                  t="1597752503211"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="23658"
                  width="15"
                  height="15"
                >
                  <path
                    d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z"
                    fill="#aaaaaa"
                    p-id="23659"
                  />
                </svg>
              </span>
            </a>
          </router-link>
          <form action>
            <ul id="info_ul">
              <li>
                <a>昵称</a>
                <div class="El-input">
                  <el-input placeholder="请输入您的昵称" v-model="input_name" clearable></el-input>
                </div>
              </li>
              <li>
                <a>性别</a>
                <div class="El-radio">
                  <el-radio v-model="radio" label="1">男</el-radio>
                  <el-radio v-model="radio" label="2">女</el-radio>
                </div>
              </li>
              <li>
                <a>电话</a>
                <div class="El-input">
                  <el-input placeholder="请输入您的电话号码" v-model="input_tel" clearable></el-input>
                </div>
              </li>
              <li>
                <a>生日</a>
                <div class="El-date">
                  <el-date-picker v-model="value" type="date" placeholder="选择日期" ></el-date-picker>
                </div>
              </li>
              <li>
                <a>职业</a>
                <div class="El-input">
                  <el-input placeholder="请输入您的职业" v-model="input_work" clearable></el-input>
                </div>
              </li>
              <li>
                <a>邮箱</a>
                <div class="El-input">
                  <el-input placeholder="请输入您的邮箱" v-model="input_email" clearable></el-input>
                </div>
              </li>
              <li>
                <a>个人简介</a>
                <div class="El-input-textarea">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 5}"
                    placeholder="请输入您的个人简介"
                    v-model="textarea"
                  ></el-input>
                </div>
              </li>
            </ul>
            <el-button type="primary" class="submit" @click="submit()">保存个人资料</el-button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "@/components/Nav.vue";
import $ from "jquery";

export default {
  components: {
    Nav
  },
  data() {
    return {
      input_name: "",
      input_tel: "",
      input_work: "",
      input_email: "",
      radio: '',
      value: "",
      textarea: "",
      contentas:'',
      uId:0
      // birth:'2020-01-02'
    };
  },
  created() {
      this.ownuids=this.$store.state.ownUid
      this.$axios.get('/api/personal/getInfos',{params:{uId:this.ownuids}})
                .then(res=>{
                    this.contentas=res.data.data[0]
                    this.input_name=this.contentas.nickName
                    this.input_tel=this.contentas.tel
                    this.input_work=this.contentas.occupation
                    this.input_email=this.contentas.mail
                    this.textarea=this.contentas.Signature
                    this.value=this.contentas.birth
                    this.radio=this.contentas.sex
                })
                .catch(err=>{
                    console.log('err:',err)
                })
    this.uId = this.$store.state.ownUid
  },
  methods:{
    submit(){
      console.log(this.radio)
      console.log(this.value)
                   this.$router.push({name: 'UserMlDynamic'})

      this.$axios.get('/api/users/rewrite',{params:{uId:this.ownuids,
                                                        nickName : this.input_name,
                                                        sex : 1,
                                                        tel : this.input_tel,
                                                        birth : this.value,
                                                        occupy :this.input_work,
                                                        eMail :this.input_email,
                                                        signature :this.textarea}})
                .then(res=>{
                  this.$message({
                                        showClose: true,
                                        message: '修改成功',
                                        type: 'success'});
                   this.$router.push({name: 'UserMlDynamic'})
                  
                  
                })
                .catch(err=>{
                  
                    console.log('err:',err)
                })
      this.$refs.sendImg.submit()
      // this.$router.go(0)
    },
    changePicture(){
      this.$refs.changes.dispatchEvent(new MouseEvent('click'))
    },
     showFileInfo(){
            var aImg = ''
            var that =this
            var fileReader = new FileReader()
            var reg = /^imag/gi
            fileReader.readAsDataURL(this.$refs.changes.files[0])
            var cal = reg.test(this.$refs.changes.files[0].type)
              if(cal){
                fileReader.onload = function(e){
                aImg = e.target.result
                document.querySelector('#icon_image').src = e.target.result
            }            
            }else{
                alert("请你老实点")
            }
            // this.$refs.pict.style.display="none"
            this.$refs.imagess.style.width="180px"
            this.$refs.imagess.style.height="180px"
      },
  }
};
</script>
<style>
* {
  margin: 0;
}

#userInfo body {
  /* background-image: url(images/login_bg2.jpg);
            background-size:100%;
            background-repeat: no-repeat; */
  background-color: rgb(231, 234, 243);
}

.userInfo-content {
  width: 1000px;
  margin: 70px auto;
  /* background-color: #fff; */
  /* border: 1px solid #fff; */
}

#userInfo .infohead {
  width: 1000px;
  height: 1300px;
  background-color: #fff;
  box-shadow: 0 0 5px 2px rgb(204, 217, 235);
  position: relative;
}
 ol, ul, dl{
  margin-bottom: 0rem!important;
}
#userInfo .infohead #titlepage {
  width: 996px;
  height: 240px;
  /* background-image: url(images/login_bg2.jpg); */
  /* background-size: cover; */
  opacity: 0.9;
  position: absolute;
  left: 2px;
  top: 0;
  overflow: hidden;
}

#userInfo .infohead #tp_image {
  width: 996px;
  position: absolute;
}

#userInfo .infohead .tp_changebtn {
  width: 130px;
  height: 30px;
  border: 1px solid rgb(204, 217, 235);
  border-radius: 10px;
  color: rgb(226, 228, 255);
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  float: right;
  margin: 5px;
  opacity: 0.5;
}

#userInfo .infohead .tp_changebtn svg {
  position: relative;
  top: 3px;
  margin-right: 2px;
}

#userInfo .infohead .tp_changebtn:hover {
  opacity: 0.9;
  cursor: pointer;
}

#userInfo .infohead #icon {
  width: 180px;
  height: 180px;
  /* background-image: url(images/logo.jpg); */
  background-size: cover;
  opacity: 1;
  position: absolute;
  left: 30px;
  top: 180px;
  border-radius: 10px;
  z-index: 1;
  box-shadow: 2px 2px 3px rgb(60, 193, 255), -2px -2px 3px rgb(60, 193, 255);
}

#userInfo .infohead #icon_image {
  width: 180px;
  height: 180px;
  border-radius: 10px;
  position: absolute;
}

#userInfo .infohead #icon_change {
  width: 180px;
  height: 180px;
  background-color: #000;
  float: left;
  border-radius: 10px;
  display: none;
  text-align: center;
  opacity: 0.5;
}

#userInfo .infohead #icon:hover {
  cursor: pointer;
}

#userInfo .infohead #icon_change svg {
  position: relative;
  top: 30px;
}

#userInfo .infohead #titlepage input,
#userInfo .infohead #icon input {
  display: none;
}

#userInfo .infohead #information {
  width: 740px;
  height: 140px;
  /* background-color: burlywood; */
  position: absolute;
  top: 245px;
  left: 230px;
  padding: 5px;
}

#userInfo .infohead #information .sp {
  display: block;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #aaa;
  font-size: 13px;
  position: absolute;
  top: 15px;
  left: 640px;
}

#userInfo .infohead #information svg {
  position: relative;
  top: 3px;
  left: -3px;
}
#userInfo .infohead #information span{
  margin: 0;
}
#userInfo #info_ul {
  list-style: none;
  margin-top: 50px;
}

#userInfo .infohead #info_ul li {
  width: 550px;
  /* height: 80px; */
  text-align: left;
  /* background-color: aqua; */
  padding: 40px 0;
  position: relative;
}

#userInfo .infohead #info_ul a {
  font-weight: 700;
  color: #444;
  font-size: 16px;
  display: inline-block;
  width: 130px;
}

#userInfo .infohead li + li {
  border-top: 1px solid #eee;
}

/* #userInfo .el-popper .available span,
#userInfo .El-radio span{
    color: #888;
} */

#userInfo .infohead .submit {
  width: 150px;
  height: 20px;
  /* border: 1px solid rgb(94, 113, 179); */
  border-radius: 10px;
  color: rgb(255, 255, 255);
  font-size: 14px;
  /* line-height: 40px; */
  text-align: center;
  position: relative;
  left: 190px;
  top: 100px;
}
#userInfo form  .el-button span{
  color: #fff;
}
#userInfo .infohead .submit:hover {
  cursor: pointer;
}
/* #userInfo .infohead input {
  border: 1px solid transparent;
  height: 30px;
  font-weight: 500;
  color: #666;
  outline: none;
} */
#userInfo .infohead .El-input {
  position: absolute;
  left: 130px;
  top: 30px;
  width: 300px;
}
#userInfo .infohead .El-date {
  position: absolute;
  left: 130px;
  top: 30px;
  /* width: 300px; */
}
#userInfo .infohead .El-radio {
  position: absolute;
  left: 130px;
  top: 36px;
  /* width: 300px; */
}
#userInfo .infohead .El-input-textarea {
  position: absolute;
  left: 130px;
  top: 40px;
  width: 300px;
}
</style>